<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <%@include file="/WEB-INF/jsp/common/common.jsp" %>   
 <!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../src/css/layui.css" media="all" />
	</head>

	<body>
		<div class="layui-container">
			<form class="layui-form" action="#">
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-block">
						<input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="name" required lay-verify="required|email" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--img-->
				<div class="layui-form-item">
					<label class="layui-form-label">头像</label>
					<div class="layui-input-block">
						<input type="hidden" name="img" id="img"/>
						<button type="button" class="layui-btn" id="pic" name="pic" >
						  <i class="layui-icon">&#xe67c;</i>头像图片
						</button>
						<img id="imgShow" />
					</div>
				</div>

				<!--qq-->
				<div class="layui-form-item">
					<label class="layui-form-label">qq</label>
					<div class="layui-input-block">
						<input type="text" name="qq" required lay-verify="required" placeholder="请输入qq号" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--email-->
				<div class="layui-form-item">
					<label class="layui-form-label">email</label>
					<div class="layui-input-block">
						<input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--tel-->
				<div class="layui-form-item">
					<label class="layui-form-label">tel</label>
					<div class="layui-input-block">
						<input type="text" name="tel" required lay-verify="required|phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--sex-->
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="0" title="男" checked>
						<input type="radio" name="sex" value="1" title="女">
					</div>
				</div>
				<!--部门-->
				<div class="layui-form-item">
					<label class="layui-form-label">部门</label>
					<div class="layui-input-block">
						<select name="deptid" lay-verify="required">
							<option value="0">北京</option>
							<option value="1">上海</option>
							<option value="2">广州</option>
							<option value="3">深圳</option>
							<option value="4">杭州</option>
						</select>
					</div>
				</div>

				<!--入职日期-->
				<div class="layui-form-item">
					<label class="layui-form-label">入职日期</label>
					<div class="layui-inline">
						<!-- 注意：这一层元素并不是必须的 -->
						<input type="text" name="hiredate" class="layui-input" id="hiredate">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置22222</button>
					</div>
				</div>
			</form>

		</div>
	</body>

	<!--导入 js 才能使用 layui-->
	<script src="../src/layui.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use(['form', 'laydate','upload'], function() {
			var $ =layui.$;
			
			/*日期初始化*/
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem: '#hiredate',
				type: 'datetime'
			});
			/*表单*/
			var form = layui.form;
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//alert(data);
				console.log(data);
				layer.msg(JSON.stringify(data.field));
				alert(JSON.stringify(data.field)); //json变成string
				alert(data.field); //json对象
				alert(data.field.password);
				return false; //拦截
			});
			
			/*文件上传*/
			var upload = layui.upload;
			//创建一个上传组件
			upload.render({
			  elem: '#pic'
			  ,url: '${ctx}/file/img'
			  ,field: 'pic'
			  ,done: function(res, index, upload){ //上传后的回调
				  //{code: 0, msg: null, data: "http://localhost:80/files/fcc10a3a-ddf6-441c-a9e8-e2f8d75ad21a.png"}
			  		if(res.code==0)
			  		{
			  			/* <div class="layui-input-block">
							<input type="hidden" name="img" id="img"/>
							<button type="button" class="layui-btn" id="pic" name="pic" >
							  <i class="layui-icon">&#xe67c;</i>头像图片
							</button>
							<img id="imgShow" />
						</div> */  
			  			$("#img").text(res.data);
						$("#imgShow").attr("width","100px");
			  			$("#imgShow").attr("src",res.data);
			  		}
			  
			  		console.log(res);
			  		console.log(index);
			  		console.log(upload);
			  } 
			});
		});
	</script>


</html>